<template>
  <div class="search">
    <a-form-model
      layout="inline"
      :model="searchForm"
      @submit="handleSubmit"
      @submit.native.prevent
    >
      <a-form-model-item label="搜索关键字：">
        <a-input v-model="searchForm.searchWord" placeholder="请输入关键字">
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="商品类目：">
        <a-select
          allowClear
          show-search
          placeholder="商品类目"
          option-filter-prop="children"
          style="width: 200px"
          @change="handleChange"
        >
          <a-select-option v-for="item in data" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" html-type="submit"> 搜索 </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import category from "@/api/category.js";
export default {
  // 商品类目
  props: ["data"],
  data() {
    return {
      searchForm: {
        searchWord: "",
        category: "",
      },
    };
  },
  methods: {
    //   提交的时候触发
    handleSubmit(val) {
      //   console.log(this.searchForm);
      this.$emit("searchSubmit", this.searchForm);
    },
    // 选择商品类目的时候触发
    handleChange(val) {
      //   console.log(val);
      this.searchForm.category = val;
    },
  },
  created() {},
};
</script>

<style lang="less" scoped>
.search {
  padding: 10px 0 10px 40px;
}
</style>
